import { Divider } from 'antd';
import 'antd/dist/antd.css';
import { GridComponent } from 'echarts/components';
import 'echarts/lib/chart/bar'; // 引入相关图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/legend'; // 引入提示框组件、标题组件
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import * as echarts from 'echarts/lib/echarts'; // 引入主模块
import React from 'react';
import Home from '../../common/home';
import http from '../../common/http';

class StatsForm extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.fetch()
    }

    fetch = () => {
        echarts.use([GridComponent]);
        this.statsEveryDay()
        this.fetchTypeTatal()
        this.fetchOpTatal()
    }

    statsEveryDay = () => {
        http.get("/api/note/stats/stats-every-day")
            .then(res => {
                var list = res.data
                var nameArr = [], createArr = [], reviewedArr = [], planReviewArr = [], waitReviewArr = []
                list.forEach(so => {
                    nameArr[nameArr.length] = so.name
                    createArr[createArr.length] = so.createValue
                    reviewedArr[reviewedArr.length] = so.reviewedValue
                    planReviewArr[planReviewArr.length] = so.planReviewValue
                    waitReviewArr[waitReviewArr.length] = so.waitReviewValue
                })
                var myChart = echarts.init(document.getElementById("everyDay"))
                var legend = { data: ['创建数', '实际复习数', '原计划复习数', '待复习数'] }
                var mySeries = [
                    { name: "创建数", data: createArr, type: 'line', color: ["#90EC7D"] },
                    { name: "实际复习数", data: reviewedArr, type: 'line', color: ["#66AEDE"] },
                    { name: "原计划复习数", data: planReviewArr, type: 'line', color: ["#FAD860"] },
                    { name: "待复习数", data: waitReviewArr, type: 'line', color: ["#FF0011"] },
                ]
                var option = {
                    title: { text: "每日统计" },
                    legend: legend,
                    tooltip: { trigger: 'axis' },
                    xAxis: { type: 'category', data: nameArr, axisLabel: { rotate: 30 } },
                    yAxis: { type: 'value' },
                    series: mySeries
                }
                myChart.setOption(option)
            })
    }

    fetchTypeTatal = () => {
        var colorList = [
            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
        ];
        http.get("/api/note/type/statistics")
            .then(res => {
                var list = res.data
                var nameArr = [], valueArr = []
                var index = 0
                list.forEach(so => {
                    nameArr[nameArr.length] = so.name
                    valueArr[valueArr.length] = {
                        value: so.noteNumber,
                        itemStyle: {
                            color: colorList[index++ % colorList.length]
                        }
                    }
                })
                var myChart = echarts.init(document.getElementById('typeTatal'))
                var option = {
                    title: { text: '类型统计' },
                    tooltip: { trigger: 'axis' },
                    xAxis: {
                        type: 'category', data: nameArr,
                        axisLabel: { interval: 0 }      // 强制 x 轴显示下所有文字
                    },
                    yAxis: { type: 'value' },
                    series: [{
                        data: valueArr, type: 'bar', barWidth: 15,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,         // 开启显示
                                    position: 'top',    // 在上方显示
                                    textStyle: {        // 数值样式
                                        color: '#686868',
                                        fontSize: 12
                                    }
                                }
                            }
                        },
                    }]
                }
                myChart.setOption(option)
            })
    }

    fetchOpTatal = () => {
        http.get("/api/note/stats/stats-total")
            .then(res => {
                var list = res.data
                var nameArr = []
                list.forEach(so => {
                    nameArr[nameArr.length] = so.name
                })
                var myChart = echarts.init(document.getElementById('opTatal'))
                var option = {
                    title: { text: '操作总统计', x: 'left' },
                    color: ['#66AEDE', '#90EC7D', '#CA8622'],
                    tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
                    legend: { orient: 'vertical', x: "left", y: "center", data: nameArr },
                    series: [{
                        name: '操作数', type: 'pie', radius: '55%', center: ['50%', '50%'],
                        data: list,
                        emphasis: {
                            shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }]
                };
                myChart.setOption(option)
            })
    }

    render() {
        const divStyly = { width: 800, height: 400, margin: "0 auto" }
        return (
            <div>
                <Home />

                <div style={{ textAlign: "center" }}>
                    <Divider dashed />

                    <h1>月统计</h1>
                    <div id="everyDay" style={divStyly} />
                    <Divider dashed />

                    <h1>总的预览</h1>
                    <div id="typeTatal" style={divStyly} />
                    <div id="opTatal" style={divStyly} />
                </div>
            </div>
        )
    }
}

export default StatsForm